<template>
  <div class="app-container">
    <div class="container-top">
      <div class="box-top">
        <index-header></index-header>
        <div class="top-group">
          <div class="group-left">
            <div class="weather">
              <van-icon name="location" color="#F4F9FF" size="16"/>
              <span>无锡市</span>
              <van-icon name="play" color="#F4F9FF" size="16" class="icon-play"/>
            </div>
            <div class="temperature">
              <span class="">27°c 阴</span>
            </div>
          </div>
          <div class="group-right">
            <van-search v-model="search" placeholder="请输入搜索关键词" class="search"/>
          </div>
        </div>
      </div>
      <div class="box-bottom">
        <div class="wrapper">
          <swiper :options="swiperOptions" style="width: 100%;height: 100%;">
            <swiper-slide v-for="item of navList" :key="item.index">
              <div class="content-item">
                <div class="content-img">
                  <img :src="item.img" >
                </div>
                <div class="content-txt">
                  <p>{{item.name}}</p>
                </div>
            </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="box-center">
          <div class="info">
            <div class="info-left">
              <div class="image">
                <img :src="userAvatar == '' ? touxiang : userAvatar"/>
              </div>
              <div class="info-tip">
                <p>{{ userName | changeStr(0) }}</p>
                <p>个人主页 ></p>
              </div>
            </div>
            <div class="info-right">
              <div class="image">
                <img :src="skm"/>
              </div>
              <p>苏康码</p>
            </div>
          </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="container-center">
      <div class="swiper">
        <van-swipe :autoplay="3000" indicator-color="##4E94F6">
          <van-swipe-item v-for="(item, index) in swiperList" :key="index">
            <img :src="item.img"/>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="line"></div>
    <div class="container-bottom">
      <div class="list-box">
        <div class="tip">
          <span>江苏政务服务·无锡</span>
        </div>
        <div class="list">
          <ul class="content">
            <li class="content-item" v-for="(item,index) of serverList" :key="item.id" @click="jump(item.id)">
              <div class="item-left">
                <div class="image">
                  <img v-lazy="item.img"/>
                </div>
                <div class="text">
                  <p :class="index == serverList.length-1?'item-icon':''">
                    <span>{{item.title}}</span>
                    <span style="font-size: 14px; color:#007aff; padding-left:8px;" v-if="index == serverList.length-1 ">滨湖区</span>
                    <van-icon name="play" color="#007aff" size="20" class="icon-play" v-if="index == serverList.length-1 "/>
                  </p>
                  <p>{{item.message}}</p>
                </div>
              </div>
               <div class="item-right">
                  <van-icon name="arrow" color="#484848" size="18"/>
               </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import IndexHeader from './components/Header';
import { mapState } from 'vuex'

export default {
  name: 'Home',
  components: {
    Swiper,
    SwiperSlide,
    IndexHeader
  },
  data () {
    return {
      navList: [{
        id: 1,
        name: '苏康码',
        img: require('@/assets/images/sukangma.png')
      }, {
        id: 2,
        name: '亮证',
        img: require('@/assets/images/liangzheng.png')
      }, {
        id: 3,
        name: '12345',
        img: require('@/assets/images/12345.png')
      }, {
        id: 4,
        name: '在线预约',
        img: require('@/assets/images/zaixianyuyue.png')
      }, {
        id: 5,
        name: '长三角',
        img: require('@/assets/images/changsanjiao.png')
      }, {
        id: 6,
        name: '好差评',
        img: require('@/assets/images/haochaping.png')
      }],
      swiperOptions: {
        slidesPerView: 5,
        slidesPerGroup: 5,
        spaceBetween: 10
      },
      touxiang: require('@/assets/images/touxiang.jpeg'),
      skm: require('@/assets/images/skm.png'),
      search: '',
      swiperList: [{
        id: 1,
        img: require('@/assets/images/swiper1.png')
      }, {
        id: 2,
        img: require('@/assets/images/swiper2.jpg')
      }, {
        id: 3,
        img: require('@/assets/images/swiper3.png')
      }],
      serverList: [{
        id: 1,
        title: '公积金',
        message: '查询缴存信息、提取预约',
        img: require('@/assets/images/gjj.png')
      }, {
        id: 2,
        title: '社保',
        message: '五险缴费、对应待遇服务',
        img: require('@/assets/images/sb.png')
      }, {
        id: 3,
        title: '交通出行',
        message: '提供出行便利',
        img: require('@/assets/images/jtcx.png')
      }, {
        id: 4,
        title: '考试教育',
        message: '考试成绩查询、学区查询',
        img: require('@/assets/images/ksjy.png')
      }, {
        id: 5,
        title: '婚育养老',
        message: '提供婚姻婚育养老服务',
        img: require('@/assets/images/hyyl.png')
      }, {
        id: 6,
        title: '住房保障',
        message: '房屋信息查询',
        img: require('@/assets/images/zfbz.png')
      }, {
        id: 7,
        title: '人才服务',
        message: '人才落户、创业指导',
        img: require('@/assets/images/rcfw.png')
      }, {
        id: 8,
        title: '不动产服务',
        message: '不动产信息查询服务',
        img: require('@/assets/images/bdcfw.png')
      }, {
        id: 9,
        title: '出入境服务',
        message: '护照查询、出入境预约',
        img: require('@/assets/images/crjfw.png')
      }, {
        id: 10,
        title: '文化旅游',
        message: '旅游景区查询',
        img: require('@/assets/images/whly.png')
      }, {
        id: 11,
        title: '生态环境',
        message: '天气情况、空气质量查询',
        img: require('@/assets/images/sthj.png')
      }, {
        id: 12,
        title: '审批许可',
        message: '生产许可证查询、行政许可公示',
        img: require('@/assets/images/spxk.png')
      }, {
        id: 13,
        title: '社会服务',
        message: '社会工作机构、社会组织查询服务',
        img: require('@/assets/images/shfw.png')
      }, {
        id: 14,
        title: '就医服务',
        message: '医保定点医院、定点药店查询',
        img: require('@/assets/images/jyfw.png')
      }, {
        id: 15,
        title: '便民利企',
        message: '燃气费查询、水费查询',
        img: require('@/assets/images/bmlq.png')
      }, {
        id: 16,
        title: '司法公正',
        message: '仲裁、司法鉴定服务',
        img: require('@/assets/images/sfgz.png')
      }, {
        id: 17,
        title: '治安户政',
        message: '出生申报、档案信息查询',
        img: require('@/assets/images/zahz.png')
      }, {
        id: 18,
        title: '公共服务',
        message: '办事预约、网上申报',
        img: require('@/assets/images/ggfw.png')
      }, {
        id: 19,
        title: '区县应用',
        message: '地市对应区县级下的服务',
        img: require('@/assets/images/qxyy.png')
      }]
    }
  },
  computed: {
    ...mapState(['userName','userAvatar'])
  },
  methods: {
    jump (id){
      let currId = id;
      if (currId == 5) {
        this.$router.push({path: '/marriage'});
      }else{
        return;
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .app-container{
    width: 100%;
    .container-top{
      width: 100%;
      position: relative;
      .box-top{
        width: 100%;
        padding-bottom: 45.5%;
        background:url('../../assets/images/topbg1.jpeg');
        background-size: 100%;
        // position: relative;
        z-index: 2;
        overflow: hidden;
        .top-group{
          width: 96%;
          margin: auto;
          position: absolute;
          top: 45px;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 5;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
          // background: #ff0;
          .group-left{
            font-size: 18px;
            display: flex;
            flex-flow: row nowrap;              
            .weather{
              font-size: 16px;
              font-weight: 400;
              color: #F4F9FF;
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              padding-right: 5px;
            }
            .temperature{
              border-left: 2px solid #F4F9FF;
              font-size: 14px;
              color: #F4F9FF;
              padding-left: 5px;
              display: flex;
              align-items: center;
            }
          }
          .group-right{
            width: 50%;
            .search{
              width: 100%;
              color: #ff0!important;
            }
          }
          
        }
      }
      .box-bottom{
        width: 100%;
        // padding-bottom: 30%;
        position: relative;
        z-index: 2;
        .wrapper{
          width: 96%;
          position: relative;
          z-index: 2;
          margin: auto;
          padding-top: 65px;
          padding-bottom: 15px;
          .content-item{
            width: 74px;
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            .content-img{
                width: 55px;
                height: 55px;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              .content-txt{
                width: 100%;
                font-size: 14px;
                font-weight: 400;
                padding-top: 5px;
                p{
                  text-align: center;
                }
              }
          }
        }
      }
      .box-center{
        width: 94%;
        height: 70px;
        border: 1px solid #ccc;
        border-radius: 10px;
        position: absolute;
        top: 57%;
        left: 50%;
        z-index: 10;
        transform: translate(-50%, -50%);
        box-shadow: 0 2px 3px -1px #ccc;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        .info{
          width: 90%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
          .info-left{
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            .image{
              width: 35px;
              height: 35px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .info-tip{
              padding-left: 10px;
              font-size: 14px;
              p{
                margin: 0;
                padding: 0;
              }
              p:nth-child(1){
                margin-bottom: 8px;
                font-size: 16px;
                color: #454543;
                font-weight: 700;
              }
              p:nth-child(2){
                color: #959998;
              }
            }
          }
          .info-right{
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            .image{
              width: 30px;
              height: 30px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            p{
              font-size: 14px;
              color: #4E94F6;
              margin-left: 10px;
            }
          }
        }
      }
    }
    .container-center{
      .swiper{
        width: 96%;
        padding-bottom: 30%;
        margin: auto;
        padding: 20px 0;
        // background: #000;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .container-bottom{
      .list-box{
        width: 96%;
        margin: auto;
        .tip{
          font-size: 20px;
          font-weight: 700;
          color: #454543;
          padding: 15px 0;
        }
        .list{
          .content{
            width: 90%;
            margin: auto;
            // background:chartreuse;
            border-bottom: 2px solid #F8F6F7;
            .content-item{
              display: flex;
              flex-flow: row nowrap;
              justify-content: space-between;
              align-items: center;
              padding: 18px 0;
              .item-left{
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                align-items: center;
                .image{
                  width: 30px;
                  height: 30px;
                  img{
                    width: 100%;
                    height: 100%;
                  }
                }
                .text{
                  padding-left: 10px;
                  font-size: 14px;
                  p{
                    margin: 0;
                    padding: 0;
                  }
                  p:nth-child(1){
                    margin-bottom: 15px;
                    font-size: 16px;
                    color: #454543;
                    font-weight: 700;
                  }
                  p:nth-child(2){
                    color: #959998;
                  }
                }
                
              }
              .itme-right{}
            }
            .content-item:last-child{
              border: 0;
            }
          }
        }
      }
    }
    .line{
      width: 100%;
      padding-bottom: 2%;
      background-color: #F8F6F7;
    }
    .icon-play{
      transform: rotate(90deg);
    }
    .item-icon{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
    }
  }
  /deep/ .van-search{
    padding: 0;
    background-color: transparent;
  }
  /deep/ .van-search__content, .van-search__content--square{
    background-color: rgba(255,255,255, 0.5)!important;
  }
  /deep/.van-icon{
    color: #fff;
  }
  /deep/ .van-cell {
    line-height: normal;
  }
  /deep/ ::-webkit-input-placeholder {
    color: #fff;
    font-size: 12px;
  }
  /deep/ :-moz-placeholder {
    color: #fff;
    font-size: 12px;
  }
  /deep/ ::-moz-placeholder{
    color: #fff;
    font-size: 12px;
  }
  /deep/ :-ms-input-placeholder {
    color: #ff0;
    font-size: 12px;
  }
</style>
